<template>
  <div>
  <headerNavigation :jump="0"></headerNavigation>
  <!-- 标签导航区 -->
  <div class="main-navigation">
    <button class="navigation-abel" @click="goclassrenke">班级</button>
    <i class="el-icon-arrow-right"></i>
    <button class="navigation-abel" @click="goreportlist">{{this.stuName}}的成长报告</button>
    <i class="el-icon-arrow-right"></i>
    <button class="navigation-abel">{{semesterName}}</button>
  </div>

  <div class="box">
    <div class="word">
      <div class="flash">
        <!--在这个flash标签里设置书本翻页的3d动画-->
        <!-- 动态翻页效果 -->
        <!-- <div style="background:#7cd000;width:100px;height:100px;"></div> -->
        <div class="navflipbook" ref="tilt">
              <div :ref="'fanye' + index" v-for="(item ,index) in flipbook" :key="index" class="page" @click="leftfilp(index)">
                <img :class="['fanye',`fanye${index}` ]" :src="item.title" alt="">
              </div>
        </div>
      </div>
      
      <div class="right">
        <div class="year">{{semesterName}}</div>
          <div class="make">制作中</div>
      </div> 
    </div>


    <div class="Info">
      <div class="Picture">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in 4" :key="item">
            <!-- 第一个页面 -->
            <div
              style="display: flex; flex-direction: row"
              v-show="1 == item"
            >
              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Myself.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="ismeList.status== '1'">
                  <img :src="`${src1 + ismeList['img1']}`" class="img1" />
                </div>
                <div class="photo10"></div>
              </div>

              <div class="picture">
                <img
                  src="@/assets/imagesbackground/MyFirend.png"
                  alt=""
                  class="img"
                />
                <div class="photo1" v-if="childList.status == '1'">
                  <img
                    :src="`${src1 + childList['img1']}`"
                    alt=""
                    class="img2"
                  />
                  <img :src="`${src1 + childList['img2']}`" class="img3" />
                </div>
              </div>

              <div class="picture">
                <img
                  src="@/assets/imagesbackground/Word.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="wordList.status == '1'">
                  <img
                    :src="`${src1 + wordList['img1']}`"
                    alt=""
                    class="img1"
                  />
                </div>
              </div>

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/MyHomework.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="workList.status == '1'">
                  <img
                    :src="`${src1 + wordList['img1']}`"
                    alt=""
                    class="img1"
                  />
                </div>
              </div>
            </div>

            <!-- 第二个页面 -->
            <div
              style="display: flex; flex-direction: row"
              v-show="2 == item"
            >

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Theme.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="thingList.status == '1'">
                  <img :src="`${src1 + thingList['img1']}`" class="img1" />
                </div>
              </div>


              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/score.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="paperList.status == '1'">
                  <img :src="`${src1 + paperList['img1']}`" class="img1" />
                </div>
              </div>


              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Action.png"
                  alt=""
                  class="img"
                />
                <div class="photo1" v-if="activityList.status == '1'">
                  <img
                    :src="`${src1 + activityList['img1']}`"
                    alt=""
                    class="img2"
                  />
                  <img :src="`${src1 + activityList['img2']}`" class="img3" />
                </div>
              </div>


              <div class="picture1">
                <div class="background">
                  <img
                    class="backgroundimg"
                    src="@/assets/imagesbackground/Report.png"
                  />
                  <img class="imgreport" src="@/assets/images/StudentReport.png" />
                </div>

              <div v-if="resultList.status == '1'">
                <div class="name">
                  <span>{{ resultList["班级"] }}</span>
                  <span>{{ resultList["学生姓名"] }}</span>
                </div>
                <div class="height">
                  <span>{{ resultList["身高"] }}</span>
                  <span>{{ resultList["体重"] }}</span>
                </div>
                <div class="ear">
                  <span>{{ resultList["左眼"] }}</span>
                  <span>{{ resultList["右眼"] }}</span>
                </div>
                <div class="resport1">
                  <div class="score">
                    <span>{{ resultList["成绩"]["语文"] }}</span>
                    <span>{{ resultList["成绩"]["数学"] }}</span>
                    <span>{{ resultList["成绩"]["英语"] }}</span>
                    <span>{{ resultList["成绩"]["科学"] }}</span>
                  </div>
                  <div class="score">
                    <span>{{ resultList["综合评价等第"]["语文"] }}</span>
                    <span>{{ resultList["综合评价等第"]["数学"] }}</span>
                    <span>{{ resultList["综合评价等第"]["英语"] }}</span>
                    <span>{{ resultList["综合评价等第"]["科学"] }}</span>
                  </div>
                </div>

                <div class="resport2">
                  <div class="assess">
                    <span>{{ resultList["综合评价等第"]["道德与法"] }}</span>
                    <span>{{ resultList["综合评价等第"]["体育"] }}</span>
                  </div>
                  <div class="assess">
                    <span>{{ resultList["综合评价等第"]["音乐"] }}</span>
                    <span>{{ resultList["综合评价等第"]["信息"] }}</span>
                  </div>
                  <div class="assess">
                    <span>{{ resultList["综合评价等第"]["美术"] }}</span>
                    <span>{{ resultList["综合评价等第"]["综合实践"] }}</span>
                  </div>
                </div>
                <div class="showreport">
                  <div class="allassesss">
                    <span>{{ resultList["综合评价等第"]["听课专注"] }}</span>
                    <span>{{ resultList["综合评价等第"]["做事负责"] }}</span>
                  </div>
                  <div class="allassesss">
                    <span>{{ resultList["综合评价等第"]["学习主动"] }}</span>
                    <span>{{ resultList["综合评价等第"]["同学合作"] }}</span>
                  </div>
                </div>
              </div>

            </div>
            </div>

            <!-- 第三个页面 -->
            <div
              style="display: flex; flex-direction: row"
              v-show="3 == item"
            >
              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/AwaitWord.png"
                  alt=""
                  class="img"
                />
                <div div="send" v-if="sendList.status == '1'">
                  <span class="send1">{{ sendList["班主任寄语"] }}</span>
                  <span class="send2">{{ sendList["任课老师寄语"] }}</span>
                </div>
              </div>

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/FirendWord.png"
                  alt=""
                  class="img"
                />
                <div v-if="talkList.status == '1'">
                <img :src="`${src1 + talkList['img1']}`" class="img10" />
                <img :src="`${src1 + talkList['img1']}`" class="img11" />
                <img :src="`${src1 + talkList['img1']}`" class="img12" />
                </div>
              </div>

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Honour.png"
                  alt=""
                  class="img"
                />
                <img
                  src="@/assets/images/StudentHonour.png"
                  alt=""
                  class="img10"
                />
                <img
                  src="@/assets/images/StudentHonour.png"
                  alt=""
                  class="img11"
                />
                <img
                  src="@/assets/images/StudentHonour.png"
                  alt=""
                  class="img12"
                />
                <div v-if="honourList.status == '1'">
                    <img :src="`${src1 + honourseal[0]}`" class="sealimg1" />
                    <img :src="`${src1 + honourseal[1]}`" class="sealimg2" />
                    <img :src="`${src1 + honourseal[2]}`" class="sealimg3" />
                </div>
                <div class="info">
                </div>
              </div>

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/sum.png"
                  alt=""
                  class="img"
                />
                <div v-if="sumList.status == '1'">
                <img :src="`${src1 + sumList['img1']}`" class="img10" />
                <img :src="`${src1 + sumList['img1']}`" class="img11" />
                <img :src="`${src1 + sumList['img1']}`" class="img12" />
                </div>
              </div>
            </div>

            <!-- 第四个页面 -->
            <div
              style="display: flex; flex-direction: row"
              v-show="4 == item"
            >
              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Grow.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="contentsList.status == '1'">
                  <img :src="`${src1 + contentsList['img1']}`" class="img1" />
                </div>
              </div>

              <div class="picture1">
                <img
                  src="@/assets/imagesbackground/Personality.png"
                  alt=""
                  class="img"
                />
                <div class="photo2" v-if="specificList.status == '1'">
                  <img :src="`${src1 + specificList['img1']}`" class="img1" />
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
  <footerNavigation></footerNavigation>
  </div>
</template>


<script>
import module from "@/allurlimg/img"
import headerNavigation from "@/views/components/background/headerNavigation1"
import footerNavigation from "@/views/components/background/footerNavigation"
import {makereport} from '@/api/luoc.api/luo3.js'


export default {
    data(){
      return{
        src1:'',
        semesterName:this.semesterName,
        flipbook:[
        {id:1,title:require('./image/010.png'),transform: 'rotateY(0deg)'},
        {id:2,title:require('./image/002.png'),transform: 'rotateY(0deg)'},
        {id:3,title:require('./image/003.png'),transform: 'rotateY(0deg)'},
        {id:4,title:require('./image/004.png'),transform: 'rotateY(0deg)'},
        {id:5,title:require('./image/005.png'),transform: 'rotateY(0deg)'},
        {id:6,title:require('./image/006.png'),transform: 'rotateY(0deg)'},
        {id:7,title:require('./image/007.png'),transform: 'rotateY(0deg)'},
        {id:8,title:require('./image/008.png'),transform: 'rotateY(0deg)'},
        {id:9,title:require('./image/009.png'),transform: 'rotateY(0deg)'},
        {id:10,title:require('./image/001.png'),transform: 'rotateY(0deg)'},
        ],
        message: {},
        growthItem: [],
        reportList: [],
        ismeList: [],
        childList: [],
        wordList: [],
        workList: [],
        thingList: [],
        paperList: [],
        activityList: [],
        resultList: [],
        sendList: [],
        talkList: [],
        honourList: [],
        sumList: [],
        contentsList: [],
        specificList: [],
        seals:[],
        honourseal:[],
        }
    },
  mounted(){
    window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
   this.src1=module.host;
  },
    components:{
        headerNavigation,
        footerNavigation,
    },
    methods:{
      /*点击翻页效果 */
      leftfilp(index) {
      this.$refs[`fanye${index}`][0].classList.add('active')
      },
       goclass(){
           this.$router.push('/goclassrenke')
        },
      goreportlist(){
        this.$router.back() 
       },
      /*调用成长报告图片 */
      async gets(){
        console.log(this.growthId,this.studentId)
        const res = await makereport({growthId:this.growthId,
        studentId:this.studentId})
        console.log(res)
        this.growthItem = res.data
        console.log(this.growthItem)
        console.log(this.semesterName)

        this.seals = this.growthItem["seals"]
        /*0页面图片信息*/
        // console.log(this.growthItem['0'])
        if(this.growthItem['0']['status'] == 1){
          this.ismeList = this.growthItem['0']
        // let getfile = `http://1.15.237.156:8080/` + '/getFile?name = '+imgsSrc
        // this.imgs=this.data.imgs.concat(imgsSrc)
        // console.log(this.ismeList)
        // console.log(this.ismeList['img1'])
        }
     
        // console.log(this.growthItem['1'])
        if(this.growthItem['1']['status'] == 1){
          this.childList = this.growthItem['1']
        }
        // console.log(this.childList)


        if(this.growthItem['12']['status'] == 1){
          this.wordList = this.growthItem['12']
        }
        // console.log(this.wordList)

        if(this.growthItem['3']['status'] == 1){
          this.workList = this.growthItem['3']
        }
 
        if(this.growthItem['4']['status'] == 1){
          this.thingList = this.growthItem['4']
        }
        

        if(this.growthItem['5']['status'] == 1){
          this.paperList = this.growthItem['5']
        }

        if(this.growthItem['6']['status'] == 1){
          this.activityList = this.growthItem['6']
        }

        if(this.growthItem['13']['status'] == 1){
          this.resultList = this.growthItem['13']
        }

        if(this.growthItem['2']['status'] == 1){
          this.sendList = this.growthItem['2']
        }

        if(this.growthItem['7']['status'] == 1){
          this.talkList = this.growthItem['7']
        }

        if (this.growthItem["8"]["status"] == 1) {
        this.honourList = this.growthItem["8"];
        if(this.honourList['honor1']== 1 ){
          this.honourseal.push(this.seals['卓越少年专用章'])
        }
        if(this.honourList['honor2']== 1 ){
          this.honourseal.push(this.seals['励志少年专用章'])
        }
        if(this.honourList['honor3']== 1 ){
          this.honourseal.push(this.seals['模范学生专用章'])
        }
        if(this.honourList['honor4']== 1 ){
          this.honourseal.push(this.seals['梦想领袖专用章'])
        }
        if(this.honourList['honor4']== 1 ){
          this.honourseal.push(this.seals['文明学生专用章'])
        }
      }

        if(this.growthItem['9']['status'] == 1){
          this.xiaojieList = this.growthItem['9']
        }

        if(this.growthItem['10']['status'] == 1){
          this.shinengList = this.growthItem['10']
        }

        if(this.growthItem['11']['status'] == 1){
          this.gexingList = this.growthItem['11']
        }
        
        },
  },

    created(){
    },
    mounted(){
      // this.growthId = this.$route.message
      // this.studentId = this.$route.message
      console.log(this.$route.params)
      let stuName=this.$route.params.stuName
      let growthId=this.$route.params.growthId
      console.log(growthId)
      let studentId=this.$route.params.studentId
      let semesterName = this.$route.params.semesterName
      if(growthId!==undefined){
        sessionStorage.setItem('growthId',growthId)
        this.growthId=sessionStorage.getItem('growthId')
      }else{
        this.growthId=sessionStorage.getItem('growthId')
      }

      if(studentId!==undefined){
        sessionStorage.setItem('studentId',studentId)
        this.studentId=sessionStorage.getItem('studentId')
      }else{
        this.studentId=sessionStorage.getItem('studentId')
      }

      if(semesterName !== undefined) {
      sessionStorage.setItem("semesterName", semesterName);
      this.semesterName = sessionStorage.getItem("semesterName");
    } else {
      this.semesterName = sessionStorage.getItem("semesterName");
    } 

       if(stuName !== undefined) {
      sessionStorage.setItem("stuName", stuName);
      this.stuName = sessionStorage.getItem("stuName");
    } else {
      this.stuName = sessionStorage.getItem("stuName");
    } 

      // console.log(this.growthId,this.studentId)
      // console.log(this.messageList)
      this.gets()
      this.src1 = module.host;
      // console.log(this.growthItem['0'])
      // if(this.growthItem[0]['status']==1){
      //   this.imgsSrc = this.growthItem['0']['img1']
      //   // let getfile = `http://1.15.237.156:8080/` + '/getFile?name = '+imgsSrc
      //   // this.imgs=this.data.imgs.concat(imgsSrc)
      //   console.log(this.imgsSrc)
      // }
    }
}
</script>


<style scoped>
/*内容区域的盒子 */
.box{
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  
  line-height: .625rem;
  width: 100%;
  height: 50rem;
}
.el-icon-arrow-right:before {
  font-size: 2.25rem;
}

/*上面的翻页和文字一起的盒子*/
.word{
  display: flex;
}
/*页面下半部分的内容*/
.Info{
  display: flex;
  margin-top: 3.125rem;
}
/*成长报告相关页面 */
.Picture{
  display: flex;
  margin-left: 9.375rem;
}
/*学年学期*/
.word .year{
  margin-top: 3.25rem;
  margin-left: 2.4375rem;
  font-size:2.0rem; 
}

.back{
  font-size: 1.125rem;
  text-align: center;
  position: absolute;
  left: 13.125rem;
  border: 0rem;
  background: #fff;
}
 /*文字制作中 */
.word .make{
  background-color:#f2e5e5 ;
  width: 5.375rem;
  height: 2.25rem;
  font-size: .625rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: .3125rem;
}
/*导出相册按钮 */
.word .gomake{
  background-color:#101010 ;
  width: 9.625rem;
  height: 2.875rem;
  font-size: .625rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: .3125rem;
  
}


/*一个模本盒子*/
.picture1{
  width: 13.75rem;
  height: 19.375rem;
  position:relative;
}

.zhaopian{
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}

/*右边的文本框 */
.right{
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* 放翻页书的盒子*/
.flash{
  background-color: #ffffff;
  width: 31.25rem;
  height: 17.25rem;
  margin-left: 16.875rem;
  margin-top: 2.875rem;
  display: flex;
}
/*翻页效果的样式*/ 
.navflipbook {
  cursor: pointer;
  position: relative;
  display: flex;
  transition: all 0.8s;
  transform-style: preserve-3d;
  transform: perspective(589px) rotateX(360deg);
  width: 400px;
}

.tiltnavflipbook {
  transform: perspective(589px) rotateX(420deg);
}
.page {
  position: absolute;
  transform-style: preserve-3d;
  width: 50%;
  left: 25%;
  transition: all 0.8s;
  transform-origin: left;
  transform: rotateY(0deg);
}

@keyframes test {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes moveshadow {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(50%);
  }
  100% {
    filter: brightness(100%);
  }
}
.fanye {
  width: 100%;
  transform-origin: center left;
}

.fanye1 {
  animation: test 2s ease-in-out forwards;
}
.fanye2 {
  animation: test 4s ease-in-out forwards;
}

.fanye3 {
  animation: test 6s ease-in-out forwards;
}

.fanye4 {
  animation: test 8s ease-in-out forwards;
}
.fanye5{
  animation: test 10s ease-in-out forwards;
}

.active .fanye {
  /*animation: test 0.4s ease-out;*/
  animation: test 2s ease-out forwards;
  transform-origin: center left;
}



/*0*/
/*一个模本盒子*/
.picture1{
    display: flex;
    width: 13.75rem;
    height: 19.375rem;
    margin-left:1.0625rem;
}
/*背景照片*/
.img{
  height:19.375rem;
  width:13.75rem;
}
/*内容照片 */
.photo2{
  height:13.1875rem;
  width:9.875rem;
  position:absolute;
  z-index:2;
  top:0px;
  margin-top:2.75rem;
  margin-left:2rem;
}
/*上传的照片*/
.img1{
  position: relative;
  height:13.1875rem;
  width:9.875rem;
  z-index: 2;
}

/*我和我的小伙伴 */
/*一个模本盒子*/
.picture{
    display: flex;
    width: 13.75rem;
    height: 19.375rem;
    margin-left: 1.0625rem;
  }
 /*背景照片*/
 .img{
  height:19.375rem;
  width:13.75rem;
}
/*内容照片 */
.photo1{
  height:13.1875rem;
  width:9.875rem;
  position:absolute;
  z-index:2;
  top:0px;
  margin-top:2.75rem;
  margin-left:2rem;
}
.img2{
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  
}
.img3{
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  margin-top:1.9375rem;
}




/*使用跑马灯的组件实现轮播效果 */
.el-carousel {
  width: 75rem;
  justify-items: center;
  align-content: center;
}

/*成长报告和按钮之间的距离 */
.el-carousel__item.is-animating{
  margin-left:6.875rem;
}


.background{
  display: flex;

}

.backgroundimg{
  height:19.375rem;
  width: 13.75rem;
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.imgreport{
  position:absolute;
  z-index: 2;
  height: 15rem !important;
  width: 11.875rem !important;
  left: 50.1%; top: 48.5%;
  transform: translate(-50%, -50%);
}
/* 信息 */
.name{
  display: flex;
  z-index: 3;
  position:absolute;
  top: 20.5%;
  left:15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.height{
  display: flex;
  z-index: 3;
  position:absolute;
  top: 24.5%;
  left:15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.ear{
    z-index: 3;
    position:absolute;
    top: 24.5%;
    right: 15%;
    font-size: .25rem;
    width: .625rem;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
    height: 1.25rem;
}
.score{
  display: flex;
  width: 7.5rem;
  justify-content: space-between;
}
.resport1{
   z-index: 3;
   position:absolute;
   top: 34.8%;right: 18%;
   font-size: .25rem;
}
.assess{
  width: 6.25rem;
  display: flex;
  justify-content:space-between;
}
.resport2{
  z-index: 3;
  position:absolute;
  top: 50.2%;
  right: 20%;
  font-size: .8125rem;
}
.allassesss{
  display: flex;
  width: 6.25rem;
  justify-content: space-between;
}
.showreport{
    z-index: 3;
    position:absolute;
    top: 70.5%;right: 20%;
    font-size: .8125rem;
}
/* 按钮 */
.btn{
    color: rgba(16, 16, 16, 1);
    font-size: .875rem;
    text-align: center;
    border: 1px solid rgba(187, 187, 187, 1);
    background-color: rgba(124, 0, 0, 1);
    width: 8.125rem;
    height: 2.1875rem;
    color: rgba(255, 255, 255, 1);
}
.btnCountainer{
    width: 100%;
    text-align: center;
    margin-top: 2.5rem;
}

.send1{
   position: absolute;
   height: 6.25rem;
   width: 10.625rem;
   z-index: 2;
   top:18%;
   left:15%;
   line-height: .9375rem;
}

.send2{
   position: absolute;
   height: 6.25rem;
   width: 10.625rem;
   z-index: 2;
   top:60%;
   left:15%;
   line-height: .9375rem;
}
.img10{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:1.875rem;
  left:1.25rem;
}
.img11{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:7.5rem;
  left:1.25rem;
}
.img12{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:13.125rem;
  left:1.25rem;
}

/* 8页面的字*/
.info{
  position: absolute;
  top:20%;
  left:40%;
  z-index:3;
}
.info2{
  margin-top:60%;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
}
.info3{
  margin-top:60%;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
}

/*小伙伴的话页面的字 */
.word1{
  position: absolute;
  top:14%;
  left:17%;
  z-index:3;
  width: 8.75rem;
  font-size:.8125rem;
}

.word2{
 display:inline-block;
 width:9.1875rem;
 height:2rem;
}

.word3{
  display:inline-block;
  width:9.1875rem;
  height:2rem;
  margin-top:42%;
}

.word4{
  display:inline-block;
  width:9.1875rem;
  height:2rem;
  margin-top:42%
}
.word5{
  margin-left:90%;
  font-size:.0625rem;
}
/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 28.125rem 0 28.125rem;
  flex-direction: row;
}
.icon-shouye-copy{
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: .1875rem;
}
.icon-right-1-copy{
  color:darkgray;
  font-size: 1.5625rem;
  padding: .4375rem;
}
.navigation-abel1{
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem; 
  padding: .625rem;
  line-height: .9375rem;
  font-size: 1.25rem;
}

/* 导航标签 */
.navigation-abel {
   line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: .5rem 1.3125rem .5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}

/* 印章管理的图片*/
.seal1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:8rem;
  left:9rem;
}

.seal2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:15rem;
  left:9rem;
}

.sealimg1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:3.15rem;
  left:5.2rem;
}
.sealimg2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:8.73rem;
  left:5.2rem;
}

.sealimg3{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:14.5rem;
  left:5.2rem;
}
</style>